<?php
include_once 'checkAdmin.php';
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我最喜爱的汽车在线投票</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="js/jq.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
</head>
<style>
    h1 {
        text-align: center;
        margin: 30px auto
    }

    .img {
        position: relative;
        margin-bottom: 15px;
    }

    .row img {
        width: 100%
    }

    .img .row {
        position: absolute;
        bottom: 0;
        left: 15px;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
    }

    p {
        margin: 10px;
    }
    form table{margin-bottom: 15px}
    td{padding: 10px}
    .loginInfo{text-align: right;font-size: 14px;font-weight: normal;color: #5c874b;display: block;margin-left: 20px}
</style>

<script src="layui/layui.js" charset="utf-8"></script>
<div class="container">
    <?php include_once 'nav.php';?>
    <div class="row">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
    <div class="row">
        <h1>添加车辆  <span><a href="show.html" style="font-size: 16px">数据查看</a></span></h1>
        <form action="postAddCar.php" method="post" enctype="multipart/form-data">
            <table width="70%" align="center" border="1" bordercolor="gray" cellpadding="15" cellspacing="0" style="border-collapse: collapse">
                <tr>
                    <td align="right">车辆名称</td><td><input name="carName"></td>
                </tr>
                <tr>
                    <td align="right">车辆描述</td><td><textarea name="carDesc"></textarea></td>
                </tr>
                <tr>
                    <td align="right">车辆图片</td><td><input type="file" name="carPIC"><input type="hidden" name="MAX_FILE_SIZE" value="1048576"><span>图片类型只能是JPG、PNG、GIF。大小不通过1MB。</span></td>
                </tr>
                <tr>
                    <td align="right"><input type="submit" value="提交"></td><td><input type="reset" value="重置"></td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">编辑图片</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    let object;
    layui.use(['table', 'util'], function(){
        var table = layui.table
            ,util = layui.util;
        table.render({
            elem: '#test'
            ,url:'getData.php'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id',  title: 'ID', hide: true}
                ,{field:'no',  title: '序号', sort: true,align:'center'}
                ,{field:'carName',  title: '车辆名称',edit:'text'}
                ,{field:'carDesc',  title: '车辆描述',edit:'text'}
                ,{field:'carNum',  title: '当前票数',align:'center'}
                ,{field:'carPIC', title: '车辆图片'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:180,align:'center'}
            ]]
            ,limit:3
            ,limits:[1,2,3,5,20]
            ,page: true
        });
        //监听行工具事件
        //监听单元格编辑
        table.on('edit(test)', function(obj){
            var _this = $(this);
            var oldTxt = _this.prev().text();
            //console.log(_this.val('555555'));
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            //console.log('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
            //通过ajax到后端去更新数据库
            $.ajax({
                url:'editTable.php',
                data:{
                    id:data.id,
                    field:field,
                    content:util.escape(value)
                },
                dataType:'json',
                type:'post',
                success:function (d){
                    if(d.code == -1){
                        alert(d.msg);
                        _this.val(oldTxt);//恢复表格原来的值
                    }
                }
            })
        });
        table.on('tool(test)', function(obj) {
            object = obj;
            var data = obj.data;
            console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //使用ajax把id传递到后端，执行删除。根据回调结果，在前端完成删除。
                    $.ajax({
                        url:'del.php',
                        data:{carID:data.id},
                        dataType: 'json',
                        type:'post',
                        success:function (d){
                            if(d.code == -1){
                                alert(d.msg);
                            }
                            else{
                                alert('删除成功');
                                obj.del();
                            }
                            layer.close(index);
                        },
                        error:function (d1,d2,d3){
                            console.log(d1)
                            console.log(d2)
                            console.log(d3)
                            alert('网络错误');
                            layer.close(index);
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    area: ['700px', '250px'],
                    fixed: false, //不固定
                    content: 'uploadPic.php?carID='+data.id
                });
                /*layer.prompt({
                    formType: 2
                    , value: data.carDesc
                }, function (value, index) {

                    obj.update({
                        carDesc: value
                    });
                    layer.close(index);
                });*/
            }
        })
    });
    function close(action,content){
        if(action == 2){
            //console.log(content);
            object.update({
                carPIC: content
            });
        }
        layer.closeAll();
    }
</script>